<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css"  href="font/iconfont.css" rel="stylesheet">
    <link type="text/css"  href="css/editor.css" rel="stylesheet">
    <style>
        *{
            padding :0px;
            margin : 0px;
        }
        body,html{
            width:100%;
            height:100%;
            background: rgb(240,240,240);
        }

        #editor{width:262px}
    </style>
</head>
<body>
<div id="editor">


</div>
<input id="123">
<div id="456"></div>
</body>
<script src="js/jquery.js"></script>
<script src="js/component.js"></script>
<script src="js/editor.js"></script>
<script src="js/tag/tagHandler.js"></script>
<script src="js/ComponentEditor.js"></script>
<script>
    var input =document.getElementById("123");
    var div =document.getElementById("456");
    var data = {};
    Object.defineProperty(data, "name", {
        configurable: true,
        get: function(){
            return input.value
        },
        set: function(newValue){
            //this.value = newValue;
            input.value = newValue;
        }
    });
    input.onchange = function(){
        data.name = this.value;
        div.innerHTML = data.name;
    }
new XEditor(
        {
            dom : $("#editor"),
            tuwen : {
                title : "123"
            }
        }
);
</script>
</html>